<template>
  <div class="home-container">
    <nav-list :clickIndex="clickIndex"></nav-list>
    <div class="middle">
      <div class="con_div">
        <div
            class="con_div_text01 hover-text"
            @click="
                        page.currentPage = 1;
                        getuseractivelist(page, 1);
                    "
        >
          <p class="title">今日用户活跃数</p>
          <p class="org">{{ indexObj.todayuserlogincount }}</p>
        </div>
        <div
            class="con_div_text01 hover-text"
            @click="
                        page.currentPage = 1;
                        getuseractivelist(page, 2);
                    "
        >
          <p class="title">本周用户活跃数</p>
          <p class="org">{{ indexObj.weekuserlogincount }}</p>
        </div>
        <div
            class="con_div_text01 hover-text"
            @click="
                        page.currentPage = 1;
                        getuseractivelist(page, 3);
                    "
        >
          <p class="title">本月用户活跃数</p>
          <p class="org">{{ indexObj.monthuserlogincount }}</p>
        </div>
        <div class="con_div_text01">
          <p class="title">今日活跃次数</p>
          <p class="org">{{countObj.today_analysedata}}</p>
        </div>
        <div class="con_div_text01">
          <p class="title">本周活跃次数</p>
          <p class="org">{{countObj.week_analysedata}}</p>
        </div>
        <div class="con_div_text01">
          <p class="title">本月活跃次数</p>
          <p class="org">{{countObj.month_analysedata}}</p>
        </div>
      </div>
    </div>
    <div class="picker-list">
      <div class="date-picker" style="width: 50%;padding-right: 58px;">
        <el-date-picker
            v-model="selectDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="getuseractivedata"
            :picker-options="pickerOptions"
            size="small"
        >
        </el-date-picker>
      </div>
      <div class="date-picker" style="width: 50%;margin-right: 1vw">
<!--        <el-date-picker-->
<!--            v-model="selectDate2"-->
<!--            type="daterange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            @change="useractive_rank"-->
<!--            size="small"-->
<!--        >-->
<!--        </el-date-picker>-->
      </div>
    </div>
    <div class="chart-two">
      <div class="line-chart">
        <div
            id="dayActive"
            v-loading="loading"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.1)"
            style="
                        width: 49vw;
                        height: 600px;
                        display: inline-block;
                        padding-top: 0;
                        margin-left: 0.5vw;
                    "
        ></div>
      </div>

      <div class="line-chart">
        <div
            id="monActive"
            v-loading="loading"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.1)"
            style="
                        width: 49vw;
                        height: 600px;
                        display: inline-block;
                        padding-top: 0;
                        margin-left: 0.5vw;
                    "
        ></div>
      </div>
<!--      <div class="huoye-list">-->
<!--        <avue-crud-->
<!--            :page.sync="useractivepage"-->
<!--            :data="useractiveList"-->
<!--            :option="tableOption7"-->
<!--            :table-loading="tableLoading"-->
<!--            :header-cell-class-name="headerCell"-->
<!--            :row-class-name="rowCell"-->
<!--            @on-load="useractiveLoad"-->
<!--            ref="crud"-->
<!--        >-->
<!--        </avue-crud>-->
<!--      </div>-->
    </div>

    <el-dialog width="80%" :visible.sync="dialogTableVisible">
      <avue-crud
          :page.sync="page"
          :data="tableData"
          :option="tableOption6"
          :table-loading="tableLoading"
          :header-cell-class-name="headerCell"
          :row-class-name="rowCell"
          @on-load="getuseractivelist"
          ref="crud"
      >
      </avue-crud>
    </el-dialog>
  </div>
</template>
<script>
import {
  getScreenIndex,
  getUserData,
  useractive_rank,
} from "@/api/homeIndex/homeIndex";
import navList from "@/components/navList/navList.vue";

import {
  getuseractivelist,
  getActiveCount,
  getDayActiveList,
  getMonActiveList
} from "@/api/inviteIndex/inviteIndex";
import "echarts/extension/bmap/bmap";
import {tableOption6, tableOption7} from "@/const/inviteIndex/inviteIndex";

export default {
  name: "homeIndex",
  components: {
    navList
  },
  data() {
    return {
      selectDate: "",
      selectDate2: '',
      // 日期时间范围在一个月以内
      pickerOptions: {
        onPick: ({maxDate, minDate}) => {
          this.selectDate = minDate.getTime();
          if (minDate && !maxDate) {
            this.timeOptionRange = minDate;
          }
          if (maxDate) {
            this.selectDate = "";
            this.timeOptionRange = null;
          }
        },
        disabledDate: (time) => {
          let timeOptionRange = this.timeOptionRange;
          if (
              timeOptionRange &&
              time.getTime() === timeOptionRange.getTime()
          )
            return true;
          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return (
                time.getTime() < minTime || time.getTime() > maxTime
            );
          }
        },
      },
      dialogTableVisible: false,
      tableData: [],
      tableOption6: tableOption6,
      tableOption7: tableOption7,
      countData: [],
      dialogTableVisible2: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 100,
      },
      dialogType: 1,
      tableLoading: true,
      clickIndex: 4,

      indexObj: {},
      pickerTime: "",
      loading: true,
      topData: [],
      dataType: "",
      scrollView: false,
      lineOpiton: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["日活数据"],
          textStyle: {
            color: "#fff",
          },
          left: "3%"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "日活数据",
            type: "line",
            stack: "day",
            data: [],
          }
        ],
      },

      lineOpiton2: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["月活数据"],
          textStyle: {
            color: "#fff",
          },
          left: "3%"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "月活数据",
            type: "line",
            stack: "mon",
            data: [],
          }
        ],
      },

      useractiveList: [],
      useractivepage: {
        currentPage: 1,
        pageSize: 10,
        total: 11,
      },
      countObj: {} //活跃次数
    };
  },
  watch: {},
  created() {
    this.getIndex();
    let startDate = this.$moment().format("YYYY-MM-DD");
    let endDate = this.$moment().add(0, "days").format("YYYY-MM-DD");
    let monDate = this.$moment().subtract(1, "months").format("YYYY-MM-DD");
    this.pickerTime = [startDate, endDate];
    this.selectDate = [monDate, startDate];


    let startDate2 = this.$moment().add(-180, "days").format("YYYY-MM-DD");

    this.selectDate2 = [startDate2, endDate]
  },
  mounted() {
    this.$nextTick(() => {
      this.getuseractivedata();
      this.getMonList();
    });
    this.getWebSocket();
    this.getCountObj()
  },

  props: [],
  methods: {
    clickData(type) {
      this.dataType = type;
      this.dialogTableVisible = true;
      let params = {
        type: type,
      };
      this.getPage(this.page, params);
    },

    useractiveLoad(page) {
      this.useractivepage.currentPage = page.currentPage;
      this.useractive_rank();
    },

    async useractive_rank(e = null) {
      if (!e)
        var obj = {
          start_date: this.selectDate2[0],
          end_date: this.selectDate2[1],
        };
      else
        var obj = {
          start_date: e[0],
          end_date: e[1],
        };
      obj.page = this.useractivepage.currentPage;
      obj.pagesize = this.useractivepage.pageSize;
      this.tableLoading = true;
      const res = await useractive_rank(obj);
      this.tableLoading = false;
      if (res.data.code == 1) {
        this.useractiveList = res.data.data;
        this.useractivepage.total = res.data.data[0].all_count;
      }
    },

    getCountObj() {
      getActiveCount().then(res => {
        this.countObj = res.data.data
      })
    },

    getPage(page, params) {
      this.tableLoading = true;
      let obj = {
        type: this.dataType,
        page: page.currentPage,
        pagesize: page.pageSize,
      };

      getUserData(obj).then((res) => {
        this.tableData = res.data.data;
        this.page.total = res.data.data[0].all_count;
        this.tableLoading = false;
      });
    },

    getuseractivelist(page, type = null) {
      this.dialogTableVisible = true;
      this.tableLoading = true;

      if (type) this.dialogType = type;
      let obj = {
        page: page.currentPage,
        pagesize: page.pageSize,
        type: this.dialogType,
      };
      getuseractivelist(obj).then((res) => {
        this.tableData = res.data.data;
        this.page.total = res.data.data[0].all_count;
        this.tableLoading = false;
      });
    },


    // 获取对于时间范围用户活跃数据
    getuseractivedata(e = null) {
      console.log(e);
      this.loading = true
      if (!e)
        var obj = {
          start_date: this.selectDate[0],
          end_date: this.selectDate[1],
        };
      else
        var obj = {
          start_date: e[0],
          end_date: e[1],
        };
      getDayActiveList(obj).then((res) => {
        this.loading = false
        console.log(res);
        let xData = [];
        let activeData = [];
        res.data.data.forEach((val) => {
          xData.push(val.date);
          activeData.push(val.value);

        });
        this.lineOpiton.xAxis.data = xData;
        this.lineOpiton.series[0].data = activeData;
        this.$echarts
            .init(document.getElementById("dayActive"))
            .setOption(this.lineOpiton);
      });
    },


    // 获取对于时间范围用户活跃数据
    getMonList() {
      this.loading = true
      getMonActiveList().then((res) => {
        this.loading = false
        console.log(res, '月活数据');
        let activeData = [];
        activeData =  Object.keys(res.data.data).map(function(key) {
          return res.data.data[key];
        });
        console.log(activeData, '整合后的数据')
        this.lineOpiton2.series[0].data = activeData;
        this.$echarts
            .init(document.getElementById("monActive"))
            .setOption(this.lineOpiton2);
      });
    },

    //获取总会员数折线图
    openDialog() {
      this.dialogTableVisible2 = true;
      this.$nextTick(() => {
        this.getPageClick();
      });
    },


    //表头样式
    headerCell({row, column, rowIndex, columnIndex}) {
      return "header-cell";
    },

    rowCell({row, column, rowIndex, columnIndex}) {
      if (rowIndex % 2 == 0) {
        return "row-cell";
      } else {
        return "row-cells";
      }
    },

    //获取首页数据
    getIndex() {
      getScreenIndex().then((res) => {
        this.indexObj = res.data.data;
      });
    },

    getWebSocket() {
      this.$goeasy.connect({
        onSuccess: function () {
          //连接成功
          console.log("GoEasy connect successfully."); //连接成功
        },
        onFailed: function (error) {
          //连接失败
          console.log(
              "Failed to connect GoEasy, code:" +
              error.code +
              ",error:" +
              error.content
          );
        },
        onProgress: function (attempts) {
          //连接或自动重连中
          console.log("GoEasy is connecting", attempts);
        },
      });
      let pubsub = this.$goeasy.pubsub;
      let _that = this;
      pubsub.subscribe({
        channel: "screen_channel", //替换为您自己的channel
        onMessage: function (message) {
          console.log("是否能从服务端主动接收到消息");
          // _that.getMap();
          _that.getIndex();
          // _that.getPageClick();
          _that.scrollView = !_that.scrollView;
        },
        onSuccess: function () {
          console.log("Channel订阅成功。");
        },
        onFailed: function (error) {
          console.log(
              "Channel订阅失败, 错误编码：" +
              error.code +
              " 错误信息：" +
              error.content
          );
        },
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/home.scss";
@import "@/styles/common.scss";

.header-cell {
  color: #61d2f7 !important;
  font-size: 14px;
  font-weight: 600;
  height: 48px;
  background-color: #072951 !important;
  box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.row-cell {
  color: #fff !important;
  background-color: #072951 !important;
}

.row-cells {
  color: #fff !important;
  background-color: #072951 !important;
  box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.chart-two {
  display: flex;
  justify-content: space-between;

  .huoye-list {
    width: 49vw;
    margin-right: 1vw;
    padding-top: 57px;
  }
}

.picker-list {
  display: flex;
  align-items: center;
}
</style> 
